<template>
	<div>
		<slot>这里是默认的效果</slot>
		<ul class="list-item-20180327">
			<li v-for="item in listData" @click="goActivityGoods(item.id, '')">
				<img v-if="item.id=='2500' || item.id=='2384'" :src="item.url"/>
				<img v-else v-lazy="item.url"/>
				<div class="price-title">
					<h1 class="ecs">{{item.title}}</h1>
					<div class="bg-icon">
						<span>¥ {{item.price}}</span>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	import Utils from '@/util/util';
	import Vue from 'vue';
	import { ToastPlugin } from 'vux';
	Vue.use(ToastPlugin)

	export default {
		components: {
			ToastPlugin
		},
		props: ['listData'],
		methods: {
			goActivityGoods: function(goodsId, activityId) {
				Utils.goActiveGoods(goodsId, activityId)
			}
		},
		data() {
			return {
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	@import '../../styles/main.less';

	.list-item-20180327 {
		text-align: center;
		width: 7rem;
		margin: 0 auto;
		li {
			display: inline-block;
			width: 48%;
			margin-bottom: .2rem;
			&:nth-child(odd) {
				clear:both;
				margin-right: .1rem;
			}
			&:nth-child(even) {
				margin-left: .1rem;
			}
			img {
				width: 100%;
				display: block;
				border-top-left-radius: .1rem;
				border-top-right-radius: .1rem;
			}
			.price-title {
				background: #fff;
				margin-top: 2px;
				padding: .15rem .1rem .1rem .2rem;
				border-bottom-left-radius: .1rem;
				border-bottom-right-radius: .1rem;
				h1 {
					font-size:.3rem;
					line-height: .45rem;
					text-align: left;
					margin-bottom: .1rem;
				}
				.bg-icon {
					text-align: left;
					height: .8rem;
					line-height: .85rem;
					background: url('../../../assets/imgs/activity_price_icon.png') 95% center no-repeat;
					background-size: auto .38rem;
					span {
						font-size: .38rem;
						color: #ff4b71;
					}
				}
			}
		}
	}
</style>